<template>
    <div class="date-button">
        <input type="text" @click="openByDrop($event)" v-model="display"  class="form-control">
        <transition name="fade">
            <div class="calendar-dropdown" :style="{'left': pos.left+'px','top': pos.top + 'px'}" v-show="show">
                <datepicker :zero="zero" :range="range" :lunar="lunar"  :value="dateValue" @select="select"></datepicker>
            </div>
        </transition>
    </div>
</template>

<script>
    import Datepicker from '@/components/widgets/Datepicker/Datepicker'
    export default {
        name: "DateButton",
        components: {
            Datepicker
        },
        props: {
            range: {
                type: Boolean,
                default: false,
            },
            lunar: {
                type: Boolean,
                default: true,
            },
            zero: {
                type: Boolean,
                default: true,
            },
            value: {
                type: String,
                default: ''
            },
            defaultToNow: {
                type: Boolean,
                default: false
            }
        },
        created() {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth() + 1
            let strMonth = month > 9 ? month : '0' + month
            let day = now.getDate()
            day = day > 9 ? day : '0' + day

            if (this.range) {
                this.display = [year, strMonth, day].join('-') + '/' + [year, strMonth, day].join('-')
                this.dateValue = [[year, month, day], [year, month, day]]
            } else {
                if (this.value) {
                    let dateArr = this.value.split('-')
                    this.dateValue = [dateArr[0], dateArr[1], dateArr[2]]
                    this.display = this.value
                } else if (this.defaultToNow){
                    this.dateValue = [year, month, day]
                    this.display = [year, strMonth, day].join('-')
                } else {
                    this.dateValue = []
                    this.display = ''
                }
            }
            this.$emit('input', this.display)
        },
        data() {
            return {
                show: false,
                display: '',
                pos: {},
                dateValue: [],
                select:(begin, end)=> {
                    this.show = false
                    if (this.range) {
                        this.dateValue = [begin, end]
                        this.display = begin.join("-") + "/" + end.join("-")
                    } else {
                        this.dateValue = begin
                        this.display = begin.join("-")
                    }
                    this.$emit('input', this.display)
                },
            }
        },
        methods: {
            openByDrop(e){
                this.show = true;
                this.pos.left= e.target.offsetLeft + 19;
                this.pos.top= e.target.offsetTop + 70;

                e.stopPropagation();
                window.setTimeout(()=>{
                    document.addEventListener("click",(e)=>{
                        this.show = false;
                        document.removeEventListener("click",()=>{},false);
                    },false);
                },1000)
            }
        },
        watch: {
            value() {
                let now = new Date()
                let year = now.getFullYear()
                let month = now.getMonth() + 1
                let strMonth = month > 9 ? month : '0' + month
                let day = now.getDate()
                day = day > 9 ? day : '0' + day
                if (this.value) {
                    if (this.range) {
                        let dateArr = this.value.split('/')
                        this.dateValue = [dateArr[0].split('-'), dateArr[1].split('-')]
                    } else {
                        let dateArr = this.value.split('-')
                        this.dateValue = [dateArr[0], dateArr[1], dateArr[2]]
                    }
                    this.display = this.value
                } else if (this.defaultToNow){
                    this.dateValue = [year, month, day]
                    this.display = [year, strMonth, day].join('-')
                } else {
                    this.dateValue = []
                    this.display = ''
                }
            }
        }
    }
</script>

<style scoped>
    /*transition*/
    .fade-enter-active,
    .fade-leave-active {
        transition: all .5s ease-in-out;
    }
    .fade-enter,.fade-leave-active{
        opacity: 0;
        transform: translateY(-10px);

    }

    /*下拉框*/
    .calendar-dropdown{
        background: #fff;
        z-index: 1000;
        position: absolute;
        left:0;
        top:0;
        padding:20px;
        border: 1px solid #eee;
        border-radius: 2px;
    }
    .calendar-dropdown:before {
        position: absolute;
        z-index: 1001;
        left:30px;
        top: -10px;
        content: "";
        border:5px solid rgba(0, 0, 0, 0);
        border-bottom-color: #DEDEDE;
    }
    .calendar-dropdown:after {
        z-index: 1002;
        position: absolute;
        left:30px;
        top: -9px;
        content: "";
        border:5px solid rgba(0, 0, 0, 0);
        border-bottom-color: #fff;
    }

    /*弹出框*/
    .calendar-dialog{
        position: absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }

    .calendar-dialog-mask{
        background:rgba(255,255,255,.5);
        width:100%;
        height:100%;
    }

    .calendar-dialog-body{
        background: #fff;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        padding:20px;
        border: 1px solid #eee;
        border-radius: 2px;
    }
</style>